<template>
  <div>
    <!-- 顶部导航栏开始 -->
    <div style="height: 60px; background-color: #202b78; display: flex; align-items: center">
      <div style="width: 220px; display: flex; align-items: center; font-size: 20px; color: white; padding-left: 15px">
<!--        <img style="width: 40px" src="@/assets/club.png" alt="">-->
        <span style="margin-left: 8px">社团管理后台</span>
      </div>
      <div style="flex: 1"></div>
      <div style="display: flex; align-items: center; padding-right: 20px">
        <img :src="data.user.avatar || defaultAvatar" alt="头像" style="width: 40px; height: 40px; border-radius: 50%">
        <span style="color: white; margin-left: 10px">{{ data.user.name }}</span>
      </div>
    </div>
    <!-- 顶部导航栏结束 -->

    <!-- 主体部分开始 -->
    <div style="display: flex">
      <!-- 左侧菜单栏开始 -->
      <div style="width: 200px; border-right: 1px solid #ddd; min-height: calc(100vh - 60px)">
        <el-menu router :default-active="router.currentRoute.value.path" :default-openeds="['1']" style="border: 0">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><User /></el-icon>
              <span>用户管理</span>
            </template>
            <el-menu-item index="/admin/admin-manage">管理员管理</el-menu-item>
            <el-menu-item index="/admin/student-manage">学生管理</el-menu-item>
            <el-menu-item index="/admin/president-manage">社长管理</el-menu-item>
          </el-sub-menu>

          <el-menu-item index="/admin/club-manage">
            <el-icon><OfficeBuilding /></el-icon>
            社团管理
          </el-menu-item>

          <el-menu-item index="/admin/person">
            <el-icon><InfoFilled /></el-icon>
            个人信息
          </el-menu-item>

          <el-menu-item index="/admin/password">
            <el-icon><Lock /></el-icon>
            修改密码
          </el-menu-item>

          <el-menu-item @click="logout">
            <el-icon><SwitchButton /></el-icon>
            退出登录
          </el-menu-item>
        </el-menu>
      </div>
      <!-- 左侧菜单栏结束 -->

      <!-- 主内容区开始 -->
      <div style="flex: 1; width: 0; background-color: #f0f2f5; padding: 10px">
        <RouterView @updateUser="updateUser" />
      </div>
      <!-- 主内容区结束 -->
    </div>
    <!-- 主体部分结束 -->
  </div>
</template>

<script setup>
import router from "@/router/index.js";
import { reactive } from "vue";

const data = reactive({
  user: JSON.parse(localStorage.getItem("xm-pro-user"))
});

const defaultAvatar = "https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png";

const logout = () => {
  localStorage.removeItem("xm-pro-user");
  location.href = "/login";
};

const updateUser = () => {
  data.user = JSON.parse(localStorage.getItem("xm-pro-user"));
};
</script>

<style>
.el-menu .is-active {
  background-color: #e6ecf7 !important;
}

.el-sub-menu__title {
  background-color: white !important;
}
</style>